<template>
  <el-card class="main-card">
    <!-- 标题 -->
    <div class="title">{{ this.$route.name }}</div>
    <div class="operation-container">
      <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="openModel(null)"
      >
        新增主科室
      </el-button>
      <!-- 数据筛选 -->
      <div style="margin-left:auto">
        <el-input
            v-model="keywords"
            prefix-icon="el-icon-search"
            size="small"
            placeholder="请输入科室名"
            style="width:200px"
            @keyup.enter.native="listDepartments"
        />
        <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            style="margin-left:1rem"
            @click="listDepartments"
        >
          搜索
        </el-button>
      </div>
    </div>
    <!-- 权限列表 -->
    <el-table
        v-loading="loading"
        :data="departmentList"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <!-- 科室名称 -->
      <el-table-column prop="departmentName" label="科室名称" width="500"/>
      <!-- 医院名称 -->
      <el-table-column prop="hospitalName" label="医院名称" width="350"/>
      <!-- 创建时间 -->
      <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          width="300"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" style="margin-right:5px"/>
          {{ scope.row.createTime | date }}
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" align="center" width="450">
        <template slot-scope="scope">
          <el-button
              type="text"
              size="mini"
              @click="openModel(scope.row, 1)"
              v-if="scope.row.children"
          >
            <i class="el-icon-plus"/> 新增
          </el-button>
          <el-button type="text" size="mini" @click="openModel(scope.row, 2)">
            <i class="el-icon-edit"/> 修改
          </el-button>
          <el-popconfirm
              title="确定删除吗？"
              style="margin-left:10px"
              @confirm="deleteMenu(scope.row.id)"
          >
            <el-button size="mini" type="text" slot="reference">
              <i class="el-icon-delete"/> 删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>


    <!-- 新增模态框 -->
    <el-dialog :visible.sync="addDepartment" width="30%" top="12vh">
      <div class="dialog-title-container" slot="title" ref="departmentTitle"/>
      <el-form label-width="80px" size="medium" :model="departmentForm">
        <!-- 科室名称 -->
        <el-form-item label="科室名称" required>
          <el-input v-model="departmentForm.departmentName" style="width:250px" />
        </el-form-item>
        <!-- 医院名称 -->
        <el-form-item label="医院名称">
          <el-input v-model="departmentForm.hospitalName" style="width:250px" :disabled="true"/>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addDepartment = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdateMenu()">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  created() {
    this.listDepartments();
  },
  data() {
    return {
      keywords: "",
      loading: true,
      addDepartment: false,
      isCatalog: true,
      show: true,
      departmentList: [],
      departmentForm: {
        id: null,
        departmentName: "",
        hospitalName: "",
        parentId: null
      },
    };
  },
  methods: {
    listDepartments() {
      this.axios
          .get("/api/admin/listDepartment", {
            params: {
              keywords: this.keywords
            },

          })
          .then(({data}) => {
            this.departmentList = data.data;
            this.loading = false;
          });
    },
    openModel(menu, type) {
      if (menu) {
        this.show = false;
        this.isCatalog = false;
        //传入的type是1就是新增科室
        switch (type) {
          case 1:
            this.departmentForm = {
              id: null,
              departmentName: "",
              hospitalName: "上海市静安区人民医院",
              parentId: null
            };
            this.$refs.departmentTitle.innerHTML = "新增科室";
            this.departmentForm.parentId = JSON.parse(JSON.stringify(menu.id));
            this.departmentForm.hospitalName = JSON.parse(JSON.stringify(menu.hospitalName));
            break;
          //传入的type是2就是修改科室
          case 2:
            this.$refs.departmentTitle.innerHTML = "修改科室";
            this.departmentForm = JSON.parse(JSON.stringify(menu));
            break;
        }
      } else {
        this.$refs.departmentTitle.innerHTML = "新增科室";
        this.show = true;
        this.departmentForm = {
          id: null,
          departmentName: "",
          hospitalName: "上海市静安区人民医院",
          parentId: null
        };
      }
      this.addDepartment = true;
    },
    saveOrUpdateMenu() {
      if (this.departmentForm.departmentName.trim() == "") {
        this.$message.error("科室名不能为空");
        return false;
      }
      this.axios.post("/api/admin/saveOrUpdateDepartment", this.departmentForm).then(({data}) => {
        if (data.flag) {
          this.$notify.success({
            title: "成功",
            message: "操作成功"
          });
          this.listDepartments();
        } else {
          this.$notify.error({
            title: "失败",
            message: "操作失败"
          });
        }
        this.addDepartment = false;
      });
    },
    deleteMenu(id) {
      this.axios.delete("/api/admin/deleteDepartment/" + id).then(({data}) => {
        if (data.flag) {
          this.$notify.success({
            title: "成功",
            message: "删除成功"
          });
          this.listDepartments();
        } else {
          this.$notify.error({
            title: "失败",
            message: data.message
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.icon-item {
  cursor: pointer;
  padding: 0.5rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
